<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#canvas{
				display: block;
				margin: 0 auto;
				box-shadow: 0 0 10px rgba(0,0,0,0.5);
			}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<script src="../libs/utils.js"></script>
		<script type="text/javascript">
			class MenuCircle {
				constructor(props) {
				    this.x = 0;
					this.y = 0;
					this.r = 25;
					this.num = 6;// 数量
					this.d = 100;//距离
					this.fillStyle = 'rgba(65,168,99,1)'
					Object.assign(this,props)
					return this;
				}
				renderMenu(ctx){
					var {x,y,r,fillStyle,num,d} = this
					ctx.save()
					// ctx.translate(x,y)
					ctx.beginPath()
					ctx.fillStyle = fillStyle
					// x,y,r,startAngle,endAngle,dir
					ctx.arc(x,y,r,0,2*Math.PI,false)
					ctx.fill()
					ctx.stroke()
					ctx.closePath()
					ctx.restore()
					
					// 绘制外层圆
					for(var i = 0;i<num;i++){
						// renderOutMenu(ctx,cx,cy)
						// 为什么是num-1:因为起始角度为0
						var angle = (180 / (num-1)) * i
						// 求x坐标
						var cx= x - Math.cos(angle * Math.PI / 180) * d 
						// 求y坐标 
						var cy = y - Math.sin(angle * Math.PI / 180) * d 
						console.log(angle);
						this.renderOutMenu(ctx,cx,cy,i)
					}
				}
				renderOutMenu(ctx,x,y,i){
					var {r,fillStyle} = this
					ctx.save()
					ctx.beginPath()
					ctx.fillStyle = fillStyle
					// x,y,r,startAngle,endAngle,dir
					ctx.arc(x,y,r,0,2*Math.PI,false)
					ctx.fill()
					ctx.stroke()
					ctx.closePath()
					ctx.restore()
					ctx.fillText(i,x,y)
				}
			}
		</script>
		<script type="text/javascript">
			var canvas = document.querySelector('#canvas')
			var ctx = canvas.getContext('2d');
			
			var w = canvas.width = 500;
			var h = canvas.height = 300;
			
			// 获取鼠标到canvas的距离
			var mouse = $C.getOffset(canvas)
			
			// drawSystem()
			var menu = new MenuCircle({x:w/2,y:h}).renderMenu(ctx)
			// 绘制坐标系
			function drawSystem(){
				ctx.save()
					ctx.beginPath()
					ctx.lineWidth = 1.5
					ctx.strokeStyle='red'
					ctx.moveTo(0,h/2)
					ctx.lineTo(w,h/2)
					ctx.moveTo(w/2,0)
					ctx.lineTo(w/2,h)
					ctx.stroke()
				ctx.restore()
			}
		</script>
	</body>
</html>
